<template>
  <div class="header">
    <div class="header-region">
      <div class="logo-region">
        <img src="./logo/img.png" alt="商城标识" class="logo">
      </div>

      <div class="search-menu">
        <div class="search-user">
          <div class="search-user-container">
            <div class="search">
              <el-input placeholder="请输入内容" v-model="input">
                <el-button type="warning" slot="append" icon="el-icon-search" class="search-btn"></el-button>
              </el-input>
            </div>
            <div class="user-content">
              <div class="user-avatar">
              <el-avatar
                  alt="头像"
                  shape="square"
                  :src="avatarUrl"
              >
                <img
                    src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
                    alt="头像"
                />
              </el-avatar>
              </div>
              <div v-if="username">

                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                   <router-link to="UserPage"><el-dropdown-item command="a">个人主页</el-dropdown-item></router-link>
                    <el-dropdown-item command="b">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>


              </div>
              <div v-else >
                <router-link to="LoginPage">你好, 请登录</router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="menu">
          <el-menu
              :default-active="$route.path"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#F7F7F7"
              text-color="#000000"
              active-text-color="#FF7F27"
              router>
            <el-menu-item index="/HomePage">超市首页</el-menu-item>
            <el-menu-item index="2">商品中心</el-menu-item>
            <el-menu-item index="/UserPage">个人账号</el-menu-item>
            <el-menu-item index="4">店铺分布</el-menu-item>
            <el-menu-item index="5">关于本站</el-menu-item>
            <div class="shopping-cart">
              <el-badge :value="200" :max="99" class="item">
              <el-button plain icon="el-icon-shopping-cart-1">超市购物车</el-button>
              </el-badge>
            </div>
          </el-menu>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      input:'',

      avatarUrl: "",
      username: "",
    };
  },

  mounted() {
    this.getUserInfo();
  },

  methods: {
    getUserInfo() {
      this.avatarUrl=localStorage.getItem("avatarUrl_supermarket");
      this.username=localStorage.getItem("username_supermarket");
    },

    /**
     * 退出登录
     */
    exit(){
      localStorage.removeItem("id_supermarket");
      localStorage.removeItem("username_supermarket");
      localStorage.removeItem("avatarUrl_supermarket");
      localStorage.removeItem("orange_supermarket");
      router.push("/LoginPage");
    },
    /**
     * 下拉菜单点击事件
     * @param command
     */
    handleCommand(command){
      switch (command){
        case "a":
          break;
        case "b":
          this.exit();
          break;
      }
    },
  }
}
</script>

<style scoped>
  .logo{
    height: 80px;
    width: auto;
  }

  .shopping-cart{
    margin-top: 10px;
    margin-right: 15px;
    float: right;
  }

  .user-avatar{
    padding-left: 15px;
    padding-right: 15px;
  }

  .header{
    display: flex;
    justify-content: center;
    background-color: #F7F7F7;/*把header的背景设置为浅灰 */
  }

/**
把logo放在导航栏左边
 */
  .header-region {
    display: flex;
    align-items: center;
    width: 80%;
  }

  .logo-region {
    margin-right: 20px;
  }

  .search-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .search-user-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu {
    margin-top: 10px;
  }

/**
把user-content放在搜索框右边
 */
  .search-user {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-user-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    width: 100%;
  }

  .search {
    flex: 1;
    margin-right: 20px;
    padding: 10px;
  }

  .user-content {
    display: flex;
    align-items: center;
  }

  .user-content .username {
    margin-left: 10px;
  }

</style>